 ` ` ` ````<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <!--  标题行    -->
      <el-row :gutter="20" style="margin: 0px -50px 0px 5px;">
        <el-col :span="20" v-if="route.query.state=='0'"><h1 class="my-heading" >新建试题</h1></el-col>
        <el-col :span="20"  v-else-if="route.query.state=='1'"><h1 class="my-heading">编辑试题</h1></el-col>
        <el-col :span="1.5"><el-button @click="uploadSysFileSubmit">保存</el-button></el-col>
        <el-col :span="1.5"><el-button @click="goBack">返回</el-button></el-col>
      </el-row>
      <!--    条件行   -->
      <el-row v-show="showSearch" :gutter="24">
        <el-col :span="16">
          <el-card style="margin: 0 10px 20px 20px">
            <el-form :model="state.queryForm" ref="dataFormRef"  :rules="dataRules" @keyup.enter="getDataList">
              <el-row :gutter="24">
                <el-col :span="12" class="mb20">
                  <el-form-item label="参考组织" prop="partOrgId">
                    <el-cascader v-model="state.queryForm.partOrgId" @visible-change="handleVisibleChange" ref="cascaderAddr" style="width: 420px" placeholder="请选择标签" @change="handleCascaderChange2"
                    :props="{ value: 'id', label: 'name', children: 'children',checkStrictly: true }" :options="options1" clearable filterable>
                    </el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="mb20">
                  <el-form-item label="参考岗位" prop="partPostName">
                    <el-select  @change="getItem1" v-model="state.queryForm.partPostName" filterable multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                      <el-option v-for="item in postList" :key="item.postsString" :label="item.postName" :value="item.postName"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="mb20">
                  <el-form-item label="专业名称" prop="zymcId" >
                    <el-select @change="getItem3" v-model="state.queryForm.zymcId" filterable clearable multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                      <el-option v-for="item in options2"   :key="item.zymcId" :label="item.zymcName" :value="item.zymcId"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="mb20">
                  <el-form-item label="关键点" prop="keyId" >
                    <el-select @change="getItem2" v-model="state.queryForm.keyId" filterable multiple clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 90%;">
                      <el-option v-for="item in keypointsListData"  :key="item.keyId" :label="item.zymcName+'-'+item.keyPoint" :value="item.keyId"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="mb20">
                  <el-form-item label="难易程度" prop="difficulty">
                    <el-input-number :min="1" :max="1000" v-model="state.queryForm.difficulty" placeholder="请输入难易程度"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="mb20" >
                  <el-form-item label="题干" prop="stem" >
                    <el-input placeholder="请输入题干"  v-model="state.queryForm.stem" clearable   size="medium"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="mb20">
                  <el-form-item label="题型" prop="questionType" >
                    <el-select v-model="state.queryForm.questionType"  placeholder="请选择题型" @change="handleChange" clearable>
                      <el-option :label="item.label" :value="item.value" v-for="(item, index) in tkgl_topic_type" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 单选 -->
                <el-col :span="15" class="mb20"  v-if="state.queryForm.questionType == 'radio'">
                  <!--   A    -->
                  <div class="option">
                    <el-form-item label="A" prop="optionA" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionA" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-radio v-model="state.queryForm.answer" label="A" >设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                  <!--   B  -->
                  <div class="option">
                    <el-form-item label="B" prop="optionB" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionB" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer" >
                      <el-radio v-model="state.queryForm.answer" label="B" >设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                  <!--   C  -->
                  <div class="option">
                    <el-form-item label="C" prop="optionC" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionC" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-radio v-model="state.queryForm.answer" label="C" >设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                  <!--  D  -->
                  <div class="option">
                    <el-form-item label="D" prop="optionD" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionD" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-radio v-model="state.queryForm.answer" label="D" >设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- 多选 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'multi'">
                  <!--   A    -->
                  <div class="option">
                    <el-form-item label="A" prop="optionA" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionA" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="answer" label="A" size="large">设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                  <!--   B  -->
                  <div class="option">
                    <el-form-item label="B" prop="optionB" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionB" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="answer" label="B" size="large">设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                  <!--   C  -->
                  <div class="option">
                    <el-form-item label="C" prop="optionC" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionC" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="answer" label="C" size="large">设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                  <!--  D  -->
                  <div class="option">
                    <el-form-item label="D" prop="optionD" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionD" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="answer" label="D" size="large">设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- 填空 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'fill'">
                  <el-form-item label="答案" prop="answer" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                    <el-input placeholder="请输入答案" v-model="state.queryForm.answer" clearable/>
                  </el-form-item>
                </el-col>
                <!-- 判断 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType =='judge'">
                  <el-form-item  prop="answer"  :rules="[{ required: true, message: '请判断',trigger: 'change',}]">
                    <el-radio-group v-model="state.queryForm.answer" class="ml-4">
                      <el-radio label="对" size="large">对</el-radio>
                      <el-radio label="错" size="large">错</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 简答 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'answer'" >
                  <el-form-item label="答案" prop="answer">
                    <el-input placeholder="请输入答案" v-model="state.queryForm.answer" clearable type="textarea" />
                  </el-form-item>
                </el-col>
                <el-col :span="20" class="mb20">
                  <el-form-item label="解析" prop="readouts">
                    <el-button type="text" :visible.sync="dialogTableVisible" @click="association">去关联</el-button>
                    <el-input  v-model="state.queryForm.readouts" style="margin: 10px 0" clearable maxlength="600" type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="20" class="mb20">
                  <el-form-item label="关联资料" prop="fileNameAll" :span="15" class="mb20">
                      <div class="line"  v-for="item in data" :key="item.id" v-if="route.query.state=='0'">{{item.dataName}}</div>
                      <div v-if="route.query.state=='1'">{{state.queryForm.fileNameAll}}</div>
<!--&lt;!&ndash;     <el-button type="text" style="margin-left: 10px" @click="preview">查看</el-button>&ndash;&gt;fileNameAll-->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="8" class="mb20" >
          <el-aside width="520px">
            <el-card >
                <div class="canvas" style="height: 650px" v-if="fileId">
                  <iframe  frameborder="0" :src="allUrl" style="width: 100%; height: 100%"></iframe>
                </div>
                <div class="canvas" style="height: 650px" v-if="!fileId">
                  <div style="font-size:32px;font-weight: bold;writing-mode: vertical-rl;text-align: right;white-space: nowrap;width: 1em;margin: auto; ">本试题暂无关联资料</div>
                </div>
            </el-card>
          </el-aside>
        </el-col>
      </el-row>
    </div>
      <!--  关联资料  -->
      <el-dialog v-model="dialogTableVisible" title="关联资料">
        <el-form :model="queryForm" ref="dataFormRef111"  @keyup.enter="getDataList">
          <el-row :gutter="24">
<!--            <el-col :span="12" class="mb20">-->
<!--              <el-form-item label="参与组织" prop="studyGroup">-->
<!--                <el-tree-select v-model="queryForm.studyGroup" disabled :data="options1" :props="{ value: 'id', label: 'name', children: 'children' }"-->
<!--              @change="handleChange" clearable check-strictly :render-after-expand="false" placeholder="请选择"/>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="8" class="mb20">
              <el-form-item label="参与岗位" prop="postId">
                <el-select  @change="getItem1" disabled v-model="queryForm.studyPost" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                  <el-option v-for="item in postList" :key="item.postId" :label="item.postName" :value="item.postId"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mb20">
              <el-form-item label="专业名称" prop="majorName">
                <el-select @change="getItem3" disabled v-model="queryForm.majorName" filterable clearable multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                  <el-option v-for="item in options2"   :key="item.zymcId" :label="item.zymcName" :value="item.zymcId"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mb20">
              <el-form-item label="关键点" prop="keyId">
                <el-select @change="getItem2" disabled v-model="queryForm.keyPoint" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                  <el-option v-for="item in keypointsListData" :key="item.keyId" :label="item.keyPoint" :value="item.keyId"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="mb20">
              <el-form-item>
                <el-button icon="search" type="primary" @click="queryList">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="gridData" @selection-change="handleCurrentChange"  ref="tableRef">
          <el-table-column type="selection" width="55" />
          <el-table-column property="dataName" label="资料名称"/>
          <el-table-column property="majorName" label="专业名称"/>
          <el-table-column property="dataLevel" label="专业等级"/>
          <el-table-column property="keyPoint" label="关键点"/>
          <el-table-column property="fileSize" label="资料大小"/>
          <el-table-column property="dataType" label="资料类型"/>
          <el-table-column property="remark" label="资料简介"/>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
        <div style="text-align: right;margin-top:20px">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProcess"> 提交 </el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script setup lang="ts" name="systemKszlFile">
  //导入
  import { BasicTableProps, useTable } from "/@/hooks/table";
  import { useMessage, useMessageBox } from "/@/hooks/message";
  import { useDict } from '/@/hooks/dict';
  import { useRoute, useRouter } from 'vue-router';
  import { Session } from '/@/utils/storage';
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import {reactive,ref} from "vue";
  import mittBus from '/@/utils/mitt';
  import { fetchList, delObjs, putObj,addobjse,putObjse } from "/@/api/train/tkglBulidQuestion";
  import { addObj, keypointsList } from '/@/api/train/jnglKeyPoints';
  import {deptTree, getEditList, syspost,informationList} from "/@/api/train/kszlData";
  import { addList, getLevel, professionalnameList } from '/@/api/train/jnglProfessionLevel';
  import { fetchList1, office, officeView} from '/@/api/train/kszlFile';
  import { editList } from '/@/api/train/tkglQuestionList'
  import { getKeyPointListByZymcIds } from '/@/api/train/ksglExamList';
  // 引入组件
  const FormDialog = defineAsyncComponent(() => import('./form.vue'));
  const cascaderAddr = ref<InstanceType<typeof import('element-plus/es/components/cascader')>>(null);
  const cascaderAddr1 = ref<InstanceType<typeof import('element-plus/es/components/cascader')>>(null);
  // 定义查询字典
  const { tkgl_topic_type } = useDict('tkgl_topic_type')
  //新增
  const pointsformlist = ref();
  // 定义变量内容
  const formDialogRef = ref()
  // 搜索变量
  const queryRef = ref()
  const showSearch = ref(true)
  const dataFormRef = ref();
  // 多选变量
  const selectObjs = ref([]) as any
  const multiple = ref(true)
  const answer = ref(['A'])
  //弹框显示
  const dialogVisible = ref(false)
  const allUrl = ref()
  const centerDialogVisible = ref(false)
  const dialogTableVisible = ref(false)
  const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
      partOrgId:[],
      partOrgName: [],
      partPostId: [],
      partPostName: [],
      difficulty:'1',
    },
    pageList: fetchList
  })
  const dataRules = ref({
    partOrgId: [{required: true, message: '参考组织不能为空', trigger: 'blur'}],
    partPostName: [{required: true, message: '参考岗位不能为空', trigger: 'blur'}],
    zymcId: [{required: true, message: '专业名称不能为空', trigger: 'blur'}],
    keyId: [{required: true, message: '关键点不能为空', trigger: 'blur'}],
    difficulty:[{required: true, message: '难易程度不能为空', trigger: 'blur'}],
    stem:[{required: true, message: '难易程度不能为空', trigger: 'blur'}],
    questionType:[{required: true, message: '难易程度不能为空', trigger: 'blur'}],
    answer:[{required: true, message: '请输入答案', trigger: 'blur'}]
  })
  const gridData = ref<any[]>([]); // 根据你的数据结构来定义类型
  const data = ref([]);

  const totalPage = ref(0);
  const pageIndex = ref(1); // 假设第一页是1
  const pageSize = ref(10); // 假设每页显示10条数据
  // 表单元素
  const dom = ref()
  const fileId =ref()
  const fileExtension =ref()
  const fileNameAll = ref()
  const relatedInfo = ref()
  const dataName = ref()
  // 校验规则
  const rules = ref({
    // name: [{ required:  true, message: '请输入活动名称', trigger: 'blur' }],
  })
  // 绑定数据
  const form = reactive({
    name: '',
    textarea:''
  })
  const queryForm = reactive({
    studyGroup:[],
    studyPost:[],
    keyPoint:[],
    majorName:[],
    studyPostIds:'',
    majorNameIds:'',
    keyPointIds:''
  })
  const zymcName = ref([])
  //学习组织数据
  const options1 = ref<any[]>([]);
  const dataList =reactive([{}])
  //专业名称数据
  const options2 =reactive([{}])
  //fileTableList
  const fileTableList = reactive([{}])
  //专业等级
  const zydjnamelist = reactive([{}])
  //测试数据-------保存数据
  const allList = reactive([{
    "state": 0,
    "studyGroup": "qq",
    "studyPosts": ['qqq','qqq'],
    "majorName": "www",
    "keyPoints": ['ee','eee'],
    "studyGroupId": "1",
    "studyPostIds": ['1','2'],
    "majorNameId": "3",
    // "keyPointIds": ['4','5'],
    "fileIds": ['23','19'],
    "originFileName": "哇阿达瓦.doc"

  }])
  //学习岗位
  const postList =reactive([{}])
  const groupIds = ref([])
  const processedPKPosts = ref([])
  const partOrgName = ref([])
  const groupId = ref()
  const zymcArr = ref([])
  //关键点
  const keypointsListData = reactive([{}])
  //部门主键
  const pkDept = ref()
  const selectedRows = ref([]);
  const officeUrl = ref()
  const officeUrl1 = ref()
  const type = ref()
  const route = useRoute();
  const showDivs = ref(true);
  let multipleSelection = ref<any[]>([])
  let tableRef = ref<any>(null)
  //挂载完毕
  onMounted(()=> {
  console.log('route.query.state',route.query.state)
    office().then((res)=>{
      officeUrl.value = res.data
      // console.log('res',res.data,officeUrl.value)
    })
    officeView().then((res)=>{
      officeUrl1.value = res.data
      // console.log('res',res.data,officeUrl.value)
    })
    // 绑定事件
    console.log(allUrl.value, "jhsjhd")
    console.log(route.query,'444444444')
    if(route.query.state =='1'){
      const id = route.query.id
      editList(id).then((res)=>{
        Object.assign(dataList, res.data)
        // let orgArray = dataList.partOrgName
        state.queryForm.partOrgName = dataList.partOrgName
        let partOrgArray = dataList.partOrgId.split('/');
        state.queryForm.partOrgId = partOrgArray
        console.log('打印数组',partOrgArray);
        console.log('得到值',state.queryForm.partOrgId);
        state.queryForm.partPostName = dataList.partPostName
        state.queryForm.partPostId = dataList.partPostId
        state.queryForm.zymcName = dataList.zymcName
        state.queryForm.zymcId = dataList.zymcId
        state.queryForm.keyId = dataList.keyId
        state.queryForm.keyPoint = dataList.keyPoint
        state.queryForm.difficulty = dataList.difficulty
        state.queryForm.stem = dataList.stem
        state.queryForm.questionType = dataList.questionType
        state.queryForm.optionA = dataList.optionA
        state.queryForm.optionB = dataList.optionB
        state.queryForm.optionC = dataList.optionC
        state.queryForm.optionD = dataList.optionD
        state.queryForm.answer = dataList.answer
        state.queryForm.readouts = dataList.readouts
        state.queryForm.fileNameAll = dataList.fileNameAll
        state.queryForm.fileExtension = dataList.fileExtension
        // state.queryForm.fileNameAll = dataList.relatedInfo
        fileId.value = dataList.fileId
        fileExtension.value = dataList.fileExtension
        console.log('文件id',fileId.value );
        console.log('取到的值',fileExtension.value);
        let originalUrl = `${officeUrl.value}/downloadFilec?id=${fileId.value}`;
        let previewUrl  = originalUrl +  `&fullfilename=${id}${fileExtension.value}`
        console.log(previewUrl,'拼接');
        let base64EncodedUrl = btoa(previewUrl);
        let encodedUrl = encodeURIComponent(base64EncodedUrl);
        allUrl.value = officeUrl1.value + encodedUrl
        console.log();
        getKeypointsList()
        getPostList()
        deptTreeList()
        getProfessionalName()
        queryList()
        submitProcess()

      });

    }else {
      // queryRef.value.resetFields();
    }

    deptTreeList()
    getProfessionalName()
    getKeypointsList()
    queryList()
    submitProcess()
  })
  const handleCascaderChange2 = (item: any) => {
    groupId.value = item[item.length-1]
    groupIds.value = item
    console.log(groupId.value,'groupId.value')
    if (cascaderAddr.value) {
      // 获取选中节点的 pathLabels
      partOrgName.value = cascaderAddr.value.getCheckedNodes()[0].pathLabels
      console.log('name值',partOrgName.value);
    }
    state.queryForm.partOrgId = groupIds.value
    state.queryForm.partOrgName = partOrgName.value
    console.log('id值', state.queryForm.partOrgId);
    state.queryForm.postIds = []
    // getPostList()
  };
  const handleVisibleChange = (isVisible:any) => {
    if (!isVisible) {
      if (cascaderAddr.value) {
        const checkedNodes = cascaderAddr.value.getCheckedNodes(); // 输出选中的节点信息
        groupId.value = checkedNodes[0].value
      }
      getPostList()
    }
  };
  //学习岗位
  const getPostList =  () =>{
    const num = groupId.value
    postList.length = 0
    // console.log('----',num,pkDept.value)
    syspost(num).then((res: any) => {
      Object.assign(postList, res.data)
      console.log(postList,'postList');
      postList.forEach((item,index)=>{
        const postsArray = item.postsString.split(',');
      })
    });
  }
  const getItem1=(val:any) =>{
    let pkPosts = []
    state.queryForm.partPostId.length = 0
    postList.forEach(item => {
      for (let i = 0; i < val.length; i++) {
        if (item.postName == val[i]) {
          pkPosts.push(item.postsString)
          state.queryForm.partPostId.push(item.postsString)
          console.log('val',val);
          console.log('item',item);
          console.log('state.queryForm.partPostId',state.queryForm.partPostId);
        }
      }
    })
  }
  // 关联资料
  const association = async () => {
    dialogTableVisible.value = true;
    console.log('弹窗', dialogTableVisible)
    queryForm.studyGroup = state.queryForm.partOrgName
    queryForm.studyPost = state.queryForm.partPostName
    queryForm.majorName = state.queryForm.zymcName
    queryForm.keyPoint = state.queryForm.keyPoint
    queryForm.studyPostIds = state.queryForm.partPostId.join('/')// 添加这个参数
    console.log('queryForm.studyPostIds',queryForm.studyPostIds);
    queryForm.majorNameIds = state.queryForm.zymcId  // 添加这个参数
    queryForm.keyPointIds = state.queryForm.keyId // 添加这个参数
    try {
      const response = await informationList({
        current: pageIndex.value,
        size: pageSize.value,
        studyPostIds: queryForm.studyPostIds, // 添加这个参数
        majorNameIds: queryForm.majorNameIds, // 添加这个参数
        keyPointIds: queryForm.keyPointIds, // 添加这个参数
      });
      console.log(response, '关联资料');
      gridData.value = response.data.records
      totalPage.value = response.data.total;
      console.log('资料', gridData);
    }catch (error) {
      console.error('Error fetching data:', error);
    }
  }
  // 每页数
  const  sizeChangeHandle = (val:number)=> {
    pageSize.value = val
    pageIndex.value = 1
    association()
  }
  // 当前页
  const  currentChangeHandle =(val:number)=> {
    pageIndex.value = val
    association()
  }
  // 关联资料查询
  const queryList = async () => {
    queryForm.studyPostIds = state.queryForm.partPostId.join('/')// 添加这个参数
    console.log('queryForm.studyPostIds',queryForm.studyPostIds);
    queryForm.majorNameIds = state.queryForm.zymcId  // 添加这个参数
    queryForm.keyPointIds = state.queryForm.keyId // 添加这个参数
    try {
      const response = await informationList({
        current: pageIndex.value,
        size: pageSize.value,
        studyPostIds: queryForm.studyPostIds, // 添加这个参数
        majorNameIds: queryForm.majorNameIds, // 添加这个参数
        keyPointIds: queryForm.keyPointIds, // 添加这个参数
      });
      console.log(response, '关联资料');
      gridData.value = response.data.records
      totalPage.value = response.data.total;
      console.log('资料', gridData);
    }catch (error) {
      console.error('Error fetching data:', error);
    }

  }
  const handleCurrentChange= (rows) => {
    selectedRows.value = rows.map((row) => row.dataFileId)
    const dataFileId = selectedRows.value.join('')
  };
  //提交
  const submitProcess = async () => {
    const dataFileId = selectedRows.value.join(',')
    const id = dataFileId
    const params = `dataFileId=${id}`;
    try {
      const response = await fetchList1(params);
      console.log(response, '关联资料121121');
      data.value = response.data.data
      console.log(response.data.data,'资料');
      fileId.value = data.value[0].onlyOfficeId;
      fileExtension.value = data.value[0].fileName
      fileNameAll.value = data.value[0].dataName
      relatedInfo.value = data.value[0].fileAddress
      console.log( relatedInfo.value);
      console.log('文件id',fileId.value);
      console.log('文件后缀',data.value[0].fileName);
      let originalUrl = `${officeUrl.value}/downloadFilec?id=${fileId.value}`;  //http://10.10.16.236:9997/downloadFile/14
      let previewUrl  = originalUrl +  `&fullfilename=${fileId.value}${fileExtension.value}`
      console.log('originalUrl',originalUrl)
      console.log('previewUrl',previewUrl)
      //转换为 Base64 编码
      let base64EncodedUrl = btoa(previewUrl);
      console.log(base64EncodedUrl,'base64EncodedUrl');
      //使用 encodeURIComponent 编码
      let encodedUrl = encodeURIComponent(base64EncodedUrl);
      allUrl.value = officeUrl1.value + encodedUrl
      console.log(allUrl.value, "jhsjhd")
      console.log('回显',data.value);
    }catch (error) {
      console.error('Error fetching data:', error);
    }
    dialogTableVisible.value = false;
  }

  // 保存
  const uploadSysFileSubmit = async () => {
    try {
      // 进行表单校验
      const valid = await dataFormRef.value.validate();
        // 设置查询表单的值
        state.queryForm.partOrgId = groupIds.value.join('/');
        state.queryForm.partOrgName = partOrgName.value.join('/');
        state.queryForm.fileId = fileId.value;
        state.queryForm.fileNameAll = fileNameAll.value;
        state.queryForm.id = route.query.id;
        state.queryForm.fileExtension = fileExtension.value;
        console.log(state.queryForm.fileExtension,fileExtension.value,'后缀名');
        state.queryForm.relatedInfo  = relatedInfo.value
        console.log(state.queryForm.relatedInfo,relatedInfo.value,'路径地址');
        // 处理特定情况
        if (state.queryForm.questionType === 'multi') {
          state.queryForm.answer = answer.value.join('');
        }

        // 根据 id 的存在性决定是修改还是添加
        const successMessage = state.queryForm.id ? '修改成功' : '添加成功';
        await (state.queryForm.id ? putObjse(state.queryForm) : addobjse(state.queryForm));

        // 显示成功消息
        useMessage().success(successMessage);

        // 导航到另一个页面
        router.push('/train/tkglQuestionList/index');
      } catch (error) {
        // 如果校验失败，显示错误信息并停止提交
        useMessage().error('表单校验失败，请检查并修正表单项。');
        return; // 退出函数
      }
  };
  const getItem2=(val:any) =>{
    console.log(val,'关键点')
    let names = []
    keypointsListData.forEach(item => {
      for (let i = 0; i < val.length; i++) {
        if (item.keyId == val[i]) {
          names.push(item.keyPoint)
        }
      }
    })
    state.queryForm.keyPoint = names
    console.log(names,'names');
  }
  const getItem3=(val:any) =>{
    let names = []
    state.queryForm.zymcId = val
    console.log(zymcArr.value,'专业名称id');
    // state.queryForm.keyId = []
    options2.forEach(item => {
      for (let i = 0; i < val.length; i++) {
        if (item.zymcId == val[i]) {
          names.push(item.zymcName)
        }
      }
    })
    state.queryForm.zymcName = names
    console.log(state.queryForm.zymcName,'专业名称name');
    getKeypointsList()
  }
  //关键点
  const  getKeypointsList = () =>{
    keypointsListData.length = 0
    const ids = {
      zymcIds:  state.queryForm.zymcId
    }
    getKeyPointListByZymcIds(ids).then((res: any) => {
      Object.assign(keypointsListData, res.data)
      console.log(res.data,'state.queryForm.zymcName = item.zymcName');
    });
  }
  //新增弹框表单
  let keypointsform = reactive({
    keyId: "",
    zymcId: "",
    zydjId: "",
    keyPoint: "",
    remark: "",
    zymcName: "",
    zydjName: ""
  })
  //  table hook
  const {
    getDataList,
    sortChangeHandle,
    downBlobFile,
    tableStyle
  } = useTable(state)
  //返回上一页
  const router = useRouter();
  const goBack = () => {
    // router.go(-1);
    router.push('/train/tkglQuestionList/index');
  };
  // 参与组织
  const deptTreeList = () => {
    deptTree().then((res) => {
      options1.value = res.data;
      console.log('111、、、',options1.value)
    });
  };
  //专业名称
  const  getProfessionalName = () => {
    professionalnameList().then((res) => {
      Object.assign(options2, res.data)
      console.log("专业名称",options2);
    });
  };
  const handleChange = (value) =>{
    console.log(value,'选中的值');
    if (value='multi' ){

    }
  }
  //修改表格单元格
  const changeHandle = (currentRow:any)=>{
    putObj(currentRow).then((res)=>{
      // console.log('--111',res)
    })
  }
  // 清空搜索条件
  const resetQuery = () => {
    // 清空搜索条件
    // queryRef.value?.resetFields()
    // 清空多选
    selectObjs.value = []
    getDataList()
  }
  // 多选事件
  const selectionChangHandle = (objs: { id: string }[]) => {
    selectObjs.value = objs.map(({ id }) => id);
    multiple.value = !objs.length;
  };
  // 删除操作
  const handleDelete = async (ids: string[]) => {
    try {
      await useMessageBox().confirm('此操作将永久删除');
    } catch {
      return;
    }

    try {
      await delObjs(ids);
      getDataList();
      useMessage().success('删除成功');
    } catch (err: any) {
      useMessage().error(err.msg);
    }
  };
</script>
<style lang="scss" scoped>
  .my-heading {
    color: black;
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 10px;
  }
  .el-form{
    margin-left: 15px;
  }


</style>
